<template>
  <div class="chart-wrap w-full h-full" :class="`${chatClassName}`"></div>
</template>
<script>
import _ from 'lodash'
import { nanoid } from 'nanoid'
export default {
  name: 'LineMode',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 图表类名
      chatClassName: `chat-${nanoid()}`,
      // 图表实例
      myChart: null,
      // 图表配置
      chartOption: {
        color: '#2f54eb',
        grid: {
          borderWidth: 0,
          show: true,
          left: 25,
          right: 0,
          top: 8,
          bottom: 110
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [
          {
            bottom: 10,
            right: 5,
            left: 5
          }
        ],
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            interval: 'auto',
            rotate: 60
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          interval: 0.1, // 步长
          min: 0, // 起始
          max: 1, // 终止

          splitLine: null,
          axisLabel: null
          // 网格样式
          // splitLine: this.yAxisSplitLine,
          // axisLabel: {
          //   formatter: this.yAxisAxisLabelFormatter
          // }
        },
        series: [
          {
            data: [],
            type: 'line',
            lineStyle: {
              color: '#2f54eb',
              width: 1
            },
            emphasis: {
              lineStyle: {
                color: '#2f54eb',
                width: 1
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = this.$echarts.init(document.querySelector(`.${this.chatClassName}`))
    this.myChart = myChart

    this.updateChart()

    window.addEventListener('resize', this.resizeEcharts)
  },
  methods: {
    // 设置 dataZomm 的 startValue 和 endValue
    setDataZoomStartAndEnd() {
      if (!this.allValues.length) {
        this.chartOption.dataZoom[0].startValue = null
        this.chartOption.dataZoom[0].endValue = null
        return
      }
      // const n = _.floor(this.allValues.length / 4)
      const n = _.floor(this.allValues.length / 16)
      const startItem = _.nth(this.allValues, -n)
      const endItem = _.last(this.allValues)
      const startValue = startItem.time
      const endValue = endItem.time

      this.chartOption.dataZoom[0].startValue = startValue
      this.chartOption.dataZoom[0].endValue = endValue
    },
    resizeEcharts() {
      this.myChart.resize()
    },

    updateChart() {
      if (this.myChart) {
        this.myChart.dispose()
        this.myChart = null

        const myChart = this.$echarts.init(document.querySelector(`.${this.chatClassName}`))
        this.myChart = myChart

        this.chartOption.xAxis.data = this.tableData.map((e) => e.time)
        this.chartOption.series[0].data = this.tableData.map((e) => {
          return {
            value: e.accuracy,
            itemStyle: {
              color: e.accuracy === 1 ? '#91cc75' : '#ee6666'
            }
          }
        })
        this.setDataZoomStartAndEnd()
        // // 绘制图表
        this.myChart.setOption(this.chartOption)
      }
    }
  }
}
</script>
